<template>
    <div style="    display: flex;
    flex-direction: column;
    align-items: center;">
        <div class="top">
            <div class="center">
                <h1>Plan Your Trip</h1>
                <p>Discover the perfect travel for you</p>
            </div>
        </div>
        <el-row class="row-bg" justify="space-evenly"  style=" width: 1240px;
        max-width: 1240px;
        min-width: 720px;">
            <el-col :span="1"></el-col>
            <el-col :span="10">
                <p class="label">How do you want to spend your trip?</p>
                <div class="demo-button-style">
                    <el-checkbox-group @change="change" v-model="queryParam.check" size="small" border="true">
                      <el-checkbox-button
                        v-for="item in spends"
                        :key="item"
                        :value="item"
                      >
                        {{ item }}
                      </el-checkbox-button>
                    </el-checkbox-group>
                  </div>
            </el-col>
            
            <el-col :span="1"></el-col>
        </el-row>
        <div class="center-btn">
            <el-button type="warning" round @click="goSpendList">Next</el-button>
        </div>

        


    </div>
</template>

<script setup>
import { ref } from 'vue';
import enLocal from "element-plus/es/locale/lang/en";
import { useRouter , useRoute} from 'vue-router';
import { categories } from '@/api/index';
import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'
 import Cookies from 'js-cookie';
const router =useRouter();
const route =useRoute();
const queryParam =  ref({});    

// 打印路由参数以调试

if(route.query){
    queryParam.value = JSON.parse(Cookies.get("setPlanQurry")) ;

}
const spends = ref([]);     
categories({page:0,size:50}).then(res=>{
    spends.value = []
    res.forEach(element => {
        spends.value.push(element.name)  
    });
     
})
function goSpendList() {

    // 设置查询参数、计划标题
    console.log(queryParam.value)
    Cookies.set('setPlanQurry', JSON.stringify(queryParam.value)); // 7 天过期
    router.push({ path: '/spendList', query: queryParam.value });
}
function change(params) {
    queryParam.value.check = params
}
</script>
<style scoped>
    .demo-button-style{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .center-btn{
        display: flex;
        justify-content: center;
    }
      .el-button {
            padding: 5px 10px;
            background-color: #FF8820;
            color: #fff;
            border: none;
            margin-top: 15%;
            cursor: pointer;
            width: 150px;
            margin-bottom: 300px;
        }
    .item-col{
        display: flex;
        justify-content: space-evenly;
        width: 250px;
    }
    .top {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .main-center {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .center h1 {
        color: black;
    }

    .label {
        font-weight: bold;
        color: #000;
    }

    .row .row-bg{
        width: 100%;

    }
    .item{
        display: flex;
    }
    .svg{
        width: 25px;
        margin-right: 15px;
        color: #000;
    }
   
</style>
<style lang="css">
     .el-input__wrapper{
        box-shadow: 0 0 0 1px #ffffff inset;
    }
    .el-date-editor .el-range__icon {
    color: #000000;
    float: left;
    font-size: 17px;
    height: inherit;
}
.el-date-editor.el-input__wrapper {
    box-shadow: 0 0 0 1px #ffffff inset;
}
.el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger{
    box-shadow: 0 0 0 1px #ffffff inset;
}
.el-icon.el-select__caret.el-select__icon{
    color: #000;
}
.el-checkbox-group {

    width: 500px;

}
.el-checkbox-button--small .el-checkbox-button__inner {

    font-size: 12px;
    padding: 5px 11px;
    margin-right: 17px;
}
.el-checkbox-button:first-child .el-checkbox-button__inner {

border-radius: 50px;
}
.el-checkbox-button .el-checkbox-button__inner {

    border-radius: 50px;
}
.el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 50px;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
    background-color: #ffffff;
    border-color: #000000;
    box-shadow: -1px 0 0 0 #ffffff;
    color: #000000;
}
.el-checkbox-button__inner{
    -webkit-appearance: none;
    background: var(--el-button-bg-color, var(--el-fill-color-blank));
    border: var(--el-border);
    /* border-left-color: transparent; */
    border-radius: 0;
    box-sizing: border-box;
    /* color: var(--el-button-text-color, var(--el-text-color-regular)); */
    /* cursor: pointer; */
    display: inline-block;
    font-size: var(--el-font-size-base);
    font-weight: var(--el-checkbox-font-weight);
    line-height: 1;
    margin: 0;
    outline: none;
    padding: 8px 15px;
    position: relative;
    text-align: center;
    transition: var(--el-transition-all);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}
.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
    border-left-color: #000;
}

</style>